<template>
    <el-container>
        <el-header class="header">
            <div class="header-left"><el-input v-model="keyword" placeholder="请输入房间编号或身份证号" class="btn-search"></el-input><el-button @click="search()">查询</el-button></div>
        </el-header>
        <el-footer>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="roomNum" label="房间编号" min-width="50"></el-table-column>
								<el-table-column prop="idCard" label="入住人身份证登记" min-width="75"></el-table-column>
                <el-table-column prop="checkInTime" label="入住时间" min-width="50"></el-table-column>
                <el-table-column label="离店时间" min-width="50">
									<template #default="scope">
									        <span>{{ scope.row.checkOutTime ? scope.row.checkOutTime : '未离店'}}</span>
									</template>
								</el-table-column>
								<el-table-column
								        prop="flag"
								        label="状态"
								        width="100"
								        :filters="flagFilter"
								        :filter-method="filterTag"
								        filter-placement="bottom-end">
								    <template #default="scope">
								        <el-tag style="color: #0f0f0f;" :color="statusTag(scope.row.flag)" disable-transitions>{{showFlag(scope.row.flag)}}</el-tag>
								    </template>
								</el-table-column>
                <el-table-column prop="orderId" label="所属订单号" min-width="100"></el-table-column>
            </el-table>
        </el-footer>
    </el-container>

</template>

<script>
    import { ElMessage } from 'element-plus'

    export default {
        data() {
            return {
                keyword: '',
                tableData: [],
								 flagFilter: [{ text: '已退房', value: 0 }, { text: '入住中', value: 1 }]
            }
        },
				methods: {
					search() {
					    this.axios.get('checkinfo', {
					        params: {
					            keyword: this.keyword
					        }
					    })
					        .then(resp => {
					            if (!resp.data.flag) {
					                ElMessage.error(resp.data.msg)
					                return;
					            }
					            this.tableData = resp.data.data.list;
					        });
					},
					showFlag(flag) {
					    switch (flag) {
					        case 0: return '已退房';
					        case 1: return '入住中';
					    }
					},
					filterTag(value, row) {
					    return row.flag === value;
					},
					statusTag(orderStatus) {
					    switch (orderStatus) {
					        case 0: return '#ff4f5b';
					        case 1: return '#b5ff9e';
					    }
					}
				},
        created() {
            this.axios.get('checkinfo')
            .then(resp => {
                if (!resp.data.flag) {
                    ElMessage.error(resp.data.msg)
                    return;
                }
                this.tableData = resp.data.data.list;
            });
        }
    }
</script>

<style scoped>
 .btn-search {
        display: inline-block;
        width: 200px;
    }
</style>